<template>
  <!-- 课程评价部分 -->
  <view class="course-evaluation" :style="isEvaluation?'':''">
    <view class="evaluation-header">
      <text class="header-title">课程评价</text>
      <text class="evaluation-count" @click="jumpMore">共 {{ evaluationCount }} 条评价
        <text v-if="isEvaluation"> ></text>
      </text>
    </view>
    <view v-if="evaluationCount>0">
      <view class="evaluation-item" v-for="(item, index) in evaluations" :key="index">
        <view class="user-info">
          <image :src="item.avatar" class="user-avatar"></image>
          <view class="user-name">{{ item.nickname }}</view>
        </view>
        <view class="rating">
          <!--        <text class="star" v-for="(star, i) in item.star" :key="i">★</text>-->
          <view class="start" :class="'star' + item.star"></view>
        </view>
        <view class="evaluation-content">{{ item.comment }}</view>
        <view v-for="(ite,ind) in item.pics" :key="ind" style="width: 40px;height: 40px;display: inline-block;margin-right: 10rpx" >
          <image :src="ite" style="width: 100%;height: 100%" mode="aspectFill" @click="previewCommentImage(ite)"></image>

        </view>
        <view class="evaluation-date">{{ item.createTime }}</view>
      </view>
    </view>
    <view v-else class="text-ccc">暂时还没有评价哦~</view>
    <view v-if="showImgPreview" class="img-preview-mask" @click="closeImgPreview">
      <image
          :src="previewImgUrl" mode="widthFix"
          :class="['img-preview', imgPreviewClosing ? 'img-preview-animate-leave' : 'img-preview-animate']"
          @click.stop
      ></image>
      <view class="img-preview-close" @click.stop="closeImgPreview">×</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "comment",
  props: ['evaluationCount', 'evaluations', 'isEvaluation', 'masterProductId', 'orderNo','isBuy'],
  data(){
    return{
      showImgPreview: false,
      previewImgUrl: '',
      imgPreviewClosing: false,
    }
  },
  methods: {
    previewCommentImage(url) {
      this.previewImgUrl = url;
      this.showImgPreview = true;
      this.imgPreviewClosing = false;
    },
    closeImgPreview() {
      this.imgPreviewClosing = true;
      setTimeout(() => {
        this.showImgPreview = false;
        this.previewImgUrl = '';
        this.imgPreviewClosing = false;
      }, 280);
    },
    jumpMore() {
      if (this.isEvaluation) {
        uni.navigateTo({
          url: `/pages/discover/courseDetails/moreComments?id=${this.masterProductId}&orderNo=${this.orderNo}&isBuy=${this.isBuy}`
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
// 定义颜色变量
$text-color: #333;
$text-light-color: #666;
$text-lighter-color: #999;

// 定义尺寸变量
$spacing: 10px;
$avatar-size: 40px;

// 定义混合器
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin padding-size {
  padding: 15px;

}

.img-preview-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-preview {
   max-width: 80vw;
  min-height: 80vw;
   border-radius: 8px;
   box-shadow: 0 4px 24px rgba(0,0,0,0.3);
 }
.img-preview-close {
  position: fixed;
  top: 40rpx;
  right: 40rpx;
  font-size: 60rpx;
  color: #fff;
  z-index: 10000;
  font-weight: bold;
  cursor: pointer;
}
@keyframes img-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes img-pop-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
}
.img-preview-animate {
  animation: img-pop-in 0.28s cubic-bezier(.55,0,.1,1);
}
.img-preview-animate-leave {
  animation: img-pop-out 0.28s cubic-bezier(.55,0,.1,1);
}

// 课程评价部分
.course-evaluation {
  @include padding-size;

  .text-ccc {
    color: #CCC;
    text-align: center;
    width: 90%;
    display: block;
    margin: auto;
  }

  .evaluation-header {
    @include flex-center;
    justify-content: space-between;
    margin-bottom: $spacing;
    position: relative;

    .header-title {
      font-size: 18px;
      /*font-weight: bold;*/
      color: $text-color;
    }

    .evaluation-count {
      position: absolute;
      right: 0;
      font-size: 14px;
      color: $text-light-color;
    }
  }

  .evaluation-item {
    margin-bottom: $spacing;
    padding: $spacing;
    border-bottom: 1rpx solid #DCDCDC;


    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: $spacing / 2;

      .user-avatar {
        width: $avatar-size;
        height: $avatar-size;
        border-radius: 50%;
        margin-right: $spacing;
      }

      .user-name {
        font-size: 14px;
        color: $text-color;
      }
    }

    .rating {
      display: flex;
      align-items: center;
      margin-bottom: $spacing / 2;

      .star {
        color: gold;
        margin-right: 2px;
      }
    }

    .evaluation-content {
      font-size: 14px;
      line-height: 1.5;
      color: $text-color;
    }

    .evaluation-date {
      font-size: 12px;
      color: $text-light-color;
      margin-top: $spacing / 2;
    }
  }
}
</style>